<template>
<div>
        

<div class="bai">
<el-form ref="form" :model="form" label-width="80px"  size="mini">
     <el-form-item label="查询名称" class="shu">
        <el-input v-model="form.name" placeholder="查询患者名称"></el-input>
        <el-button type="primary" size="mini" @click="dianj">查询</el-button>
        <el-button size="mini" @click="ko">重置</el-button>
    </el-form-item>
</el-form>


  <el-table :data="data"   stripe style="width: 100%;" size='medium'>
    <el-table-column ref="tablecolumn" prop="name" border label="姓名" width="77"></el-table-column>
    <el-table-column prop="price" label="挂号费" width="77"> </el-table-column>
    <el-table-column prop="ID_number" label="身份证" width="200"> </el-table-column>
    <el-table-column prop="phone" label="手机号" width="120"> </el-table-column>
    <el-table-column prop="department" label="科室" width="80"> </el-table-column>
    <el-table-column prop="dname" label="主治医师"  width="120"> </el-table-column>
    <el-table-column prop="register_time" label="就诊时间"> </el-table-column>
    <el-table-column prop="state" label="病症描述" width="350"></el-table-column>

    <el-table-column prop="state" label="操作">
      <template slot-scope="scope">
        <el-button id="ttable" type="success" size="mini" @click.native="deleteRow(scope.$index)">{{data[scope.$index].issee ? '已到诊':"到诊"}}</el-button>
      </template>
    </el-table-column>


  </el-table>
  </div>
</div>
</template>

<script>
export default {
    data() {
    return {
      one:[],
       names:'',
        shu:'',
        now:1,
         form: {
            name: '',
         },
      data:[],
      daozhen:'到诊'
    };
  },
  mounted(){
   this.getData()
  },
  methods:{
    putData(){
      this.form.name=this.data[this.shu].name
      console.log(this.form.name);
      let url = `/ht_see`
      let x = `issee=${this.now}&name=${this.form.name}`
      this.axios.put(url,x).then(res=>{
        // console.log(res);
      })
    },


      getData(){
        let url = `/htget_see?name=${this.names}`
        this.axios.get(url).then(res=>{
  
        this.data= res.data.data.filter(nim=>{
           return nim.qxgh>0
          })
         
        })
      },


    //重置input输入框
    ko(){
      this.form.name=''
      this.names = ''
      this.getData()
    },
    dianj(){
       this.names = this.form.name
       this.getData()
    },
    //删除表格数据
    deleteRow(index) {
       this.$confirm('此操作将永久修改, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '成功!',
          });
          
         let btns = document.querySelectorAll('#ttable')
         this.data.filter(so=>{
            if(so.qxgh==1){
                 btns[index].innerText = '已取消'
            }
          })

         btns[index].innerText = '已到诊'
         this.shu = index

         this.putData()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
    },

  },

  
};

</script>





<style lang="scss" scoped>

.el-button{
    display: inline;
}
::v-deep .el-table{
  padding: 0 20px 20px 20px;
}
::v-deep .el-input__inner{
    width: 200px;
}
::v-deep .el-form{
  padding-top: 20px;
  padding-left: 10px;
}

::v-deep .el-input{
  width: 215px;
}
</style>




<style lang="scss">
.el-main {
  padding: 20px;
  
}
.el-table th.el-table__cell{
    background-color: #f5f5f5;
}.el-button{
    display: inline;
}
.bai{
  background-color: #fff;
  height: calc(100vh - 100px);
    box-shadow:0px 0px 10px #ccc;
     border-radius: 7px;
    overflow: hidden;
  overflow-x: hidden;
  overflow-y: scroll;
}
</style>